<template>
  <div v-loading="pageLoading">
    <header class="game_modal_header">日程安排</header>
    <div class="schedule_content modal_shadow">
      <template v-if="scheduleList.length">
        <el-steps direction="vertical" :active="scheduleList.length + 1">
          <el-step v-for="item in scheduleList" :key="item.id" icon="el-icon-s-help">
            <div slot="title">{{ item.time && item.time.replace('T', ' ') }}{{ item.endTime && ' ~ ' + item.endTime.replace('T', ' ') }}</div>
            <div slot="description">
              <el-row>
                <el-col :span="1" style="width: 38px;">事件：</el-col>
                <el-col :span="23" style="width: calc(100% - 38px);">{{ item.name }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="1" style="width: 38px;">地点：</el-col>
                <el-col :span="23" style="width: calc(100% - 38px);">{{ item.location }}</el-col>
              </el-row>
              <el-row v-if="item.comment">
                <el-col :span="1" style="width: 38px;">备注：</el-col>
                <el-col :span="23" style="width: calc(100% - 38px);">{{ item.comment }}</el-col>
              </el-row>
            </div>
          </el-step>
        </el-steps>
      </template>
      <div v-else class="no_data">暂无日程安排</div>
    </div>
  </div>
</template>
<script>
import {
  api_GET_EventsManagementCompetitionSchedule
} from '@/extend/api/gameswaggerApi/app';
export default {
  data() {
    return {
      pageLoading: false,
      scheduleList: []
    };
  },
  created() {
    this.gameId = this.$route.query.id;
    this.getScheduleList();
  },
  methods: {
    // 获取日程安排
    getScheduleList() {
      if (!this.gameId) return;
      this.pageLoading = true;
      api_GET_EventsManagementCompetitionSchedule({ competitionId: this.gameId }).then(res => {
        this.scheduleList = res.items || [];
        this.pageLoading = false;
      }, () => {
        this.pageLoading = false;
      });
    }
  }
};
</script>
<style>
.modal_shadow {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
}
.game_modal_header {
  position: relative;
  box-sizing: border-box;
  height: 40px;
  padding-left: 20px;
  margin-bottom: 14px;
  line-height: 40px;
  color: #353434;
  font-weight: bold;
  font-size: 20px;
}
.game_modal_header::after {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 40px;
  background-color: #E02020;
  border-radius: 4px;
  content: "";
}
.schedule_content {
  padding: 20px;
}
</style>
